<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>干线协调优化平台 - 绿波跟踪</title>
    <link rel="stylesheet" href="../components/libs/fontawesome/6.7.2/css/all.min.css" />
    <link rel="stylesheet" href="../components/common/base.css">
    <link rel="stylesheet" href="./index.css" />
    <link rel="stylesheet" href="./tracking.css" />
</head>

<body class="bg-dark-gradient">
    <!-- 顶部导航组件 -->
    <header class="layout-header">
        <!-- Logo区域 -->
        <div class="layout-logo">
            <i class="fas fa-traffic-light logo-icon"></i>
            <span class="logo-text">干线协调优化平台</span>
        </div>
        
        <!-- 弹性空间 -->
        <div class="header-spacer"></div>
        
        <!-- 业务菜单 -->
        <nav class="header-nav">
            <a href="index.html" class="nav-item" data-action="home">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </a>
            <a href="greenwave-sections.html" class="nav-item" data-action="sections">
                <i class="fas fa-road"></i>
                <span>绿波路段</span>
            </a>
            <a href="cal.html" class="nav-item" data-action="greenwave">
                <i class="fas fa-calculator"></i>
                <span>绿波计算</span>
            </a>
            <a href="tracking.html" class="nav-item active" data-action="tracking">
                <i class="fas fa-route"></i>
                <span>绿波效果跟踪</span>
            </a>
            <a href="history.html" class="nav-item" data-action="history">
                <i class="fas fa-history"></i>
                <span>历史方案</span>
            </a>
            <a href="work.html" class="nav-item" data-action="work">
                <i class="fas fa-clipboard-list"></i>
                <span>工作记录</span>
            </a>
        </nav>
    </header>

    <!-- 主内容区域 -->
    <main class="main-content">
        <div class="tracking-container">
            <!-- 页面标题区域 -->
            <header class="tracking-header">
                <div class="tracking-title">
                    <i class="fas fa-wave-square"></i>
                    <h1>绿波效果跟踪</h1>
                    <span class="subtitle">实时监控绿波方案执行效果</span>
                </div>
                <div class="tracking-stats">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-project-diagram"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">15</div>
                            <div class="stat-label">运行方案</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon success">
                            <i class="fas fa-traffic-light"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">78</div>
                            <div class="stat-label">协调路口</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon warning">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">82%</div>
                            <div class="stat-label">协调效率</div>
                        </div>
                    </div>
                </div>
            </header>

            <!-- 搜索筛选区域 -->
            <section class="filter-section">
                <div class="filter-container">
                    <div class="filter-group">
                        <label class="filter-label">
                            <i class="fas fa-sitemap"></i>
                            绿波方案
                        </label>
                        <select class="filter-select">
                            <option value="">全部方案</option>
                            <option value="scheme1">三亚市区主干线绿波方案A</option>
                            <option value="scheme2">振州路协调方案B</option>
                            <option value="scheme3">迎宾路优化方案C</option>
                            <option value="scheme4">凤凰路晚高峰方案D</option>
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label class="filter-label">
                            <i class="fas fa-map-marker-alt"></i>
                            路段选择
                        </label>
                        <select class="filter-select">
                            <option value="">全部路段</option>
                            <option value="zhenzhou">振州路段</option>
                            <option value="yingbin">迎宾路段</option>
                            <option value="fenghuang">凤凰路段</option>
                            <option value="yuya">榆亚路段</option>
                            <option value="shengli">胜利路段</option>
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label class="filter-label">
                            <i class="fas fa-calendar"></i>
                            时间范围
                        </label>
                        <div class="filter-inputs">
                            <input type="datetime-local" class="filter-input" value="2024-01-15T08:00">
                            <span class="filter-separator">至</span>
                            <input type="datetime-local" class="filter-input" value="2024-01-15T18:00">
                        </div>
                    </div>
                    
                    <div class="filter-group">
                        <label class="filter-label">
                            <i class="fas fa-flag"></i>
                            运行状态
                        </label>
                        <select class="filter-select">
                            <option value="">全部状态</option>
                            <option value="running">正常运行</option>
                            <option value="adjusting">自动调节</option>
                            <option value="warning">预警状态</option>
                            <option value="offline">离线状态</option>
                        </select>
                    </div>
                    
                    <div class="filter-actions">
                        <button class="btn btn-primary">
                            <i class="fas fa-search"></i>
                            搜索
                        </button>
                        <button class="btn btn-outline">
                            <i class="fas fa-redo"></i>
                            重置
                        </button>
                    </div>
                </div>
            </section>

            <!-- 数据表格区域 -->
            <section class="table-section">
                <div class="section-header">
                    <div class="section-title">
                        <i class="fas fa-table"></i>
                        绿波执行状态详情
                    </div>
                    <div class="section-actions">
                        <button class="btn btn-outline">
                            <i class="fas fa-download"></i>
                            导出报告
                        </button>
                        <button class="btn btn-primary">
                            <i class="fas fa-sync-alt"></i>
                            实时刷新
                        </button>
                    </div>
                </div>
                
                <div class="table-container">
                    <table class="tracking-table">
                        <thead>
                            <tr>
                                <th>路口名称</th>
                                <th>方案状态</th>
                                <th>周期时长</th>
                                <th>绿波带宽</th>
                                <th>相位差</th>
                                <th>协调效率</th>
                                <th>最后更新</th>
                                <th>控制器</th>
                                <th>信号状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="intersection-name">振州路-裕民路</td>
                                <td><span class="status-badge status-running">正常运行</span></td>
                                <td class="number-cell">120s</td>
                                <td class="number-cell">35s</td>
                                <td class="number-cell">15s</td>
                                <td class="efficiency-cell">
                                    <div class="efficiency-bar">
                                        <div class="efficiency-fill" style="width: 85%"></div>
                                    </div>
                                    <span class="efficiency-text">85%</span>
                                </td>
                                <td class="time-cell">14:25:12</td>
                                <td class="controller-cell">海康</td>
                                <td class="signal-status">
                                    <div class="signal-light green"></div>
                                    <span>绿灯</span>
                                </td>
                                <td class="action-cell">
                                    <button class="action-btn view" title="查看详情">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="action-btn adjust" title="参数调节">
                                        <i class="fas fa-sliders-h"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="intersection-name">振州路-创业街</td>
                                <td><span class="status-badge status-adjusting">自动调节</span></td>
                                <td class="number-cell">120s</td>
                                <td class="number-cell">32s</td>
                                <td class="number-cell">25s</td>
                                <td class="efficiency-cell">
                                    <div class="efficiency-bar">
                                        <div class="efficiency-fill warning" style="width: 72%"></div>
                                    </div>
                                    <span class="efficiency-text">72%</span>
                                </td>
                                <td class="time-cell">14:24:08</td>
                                <td class="controller-cell">海康</td>
                                <td class="signal-status">
                                    <div class="signal-light yellow"></div>
                                    <span>黄灯</span>
                                </td>
                                <td class="action-cell">
                                    <button class="action-btn view" title="查看详情">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="action-btn adjust" title="参数调节">
                                        <i class="fas fa-sliders-h"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="intersection-name">迎宾路-荔枝沟路</td>
                                <td><span class="status-badge status-running">正常运行</span></td>
                                <td class="number-cell">110s</td>
                                <td class="number-cell">38s</td>
                                <td class="number-cell">42s</td>
                                <td class="efficiency-cell">
                                    <div class="efficiency-bar">
                                        <div class="efficiency-fill" style="width: 88%"></div>
                                    </div>
                                    <span class="efficiency-text">88%</span>
                                </td>
                                <td class="time-cell">14:25:15</td>
                                <td class="controller-cell">PSC</td>
                                <td class="signal-status">
                                    <div class="signal-light red"></div>
                                    <span>红灯</span>
                                </td>
                                <td class="action-cell">
                                    <button class="action-btn view" title="查看详情">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="action-btn adjust" title="参数调节">
                                        <i class="fas fa-sliders-h"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="intersection-name">凤凰路-河东路（红树林路口）</td>
                                <td><span class="status-badge status-warning">预警状态</span></td>
                                <td class="number-cell">130s</td>
                                <td class="number-cell">28s</td>
                                <td class="number-cell">18s</td>
                                <td class="efficiency-cell">
                                    <div class="efficiency-bar">
                                        <div class="efficiency-fill error" style="width: 58%"></div>
                                    </div>
                                    <span class="efficiency-text">58%</span>
                                </td>
                                <td class="time-cell">14:22:45</td>
                                <td class="controller-cell">海康</td>
                                <td class="signal-status">
                                    <div class="signal-light green"></div>
                                    <span>绿灯</span>
                                </td>
                                <td class="action-cell">
                                    <button class="action-btn view" title="查看详情">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="action-btn adjust" title="参数调节">
                                        <i class="fas fa-sliders-h"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="intersection-name">胜利路-跃进路</td>
                                <td><span class="status-badge status-running">正常运行</span></td>
                                <td class="number-cell">115s</td>
                                <td class="number-cell">40s</td>
                                <td class="number-cell">35s</td>
                                <td class="efficiency-cell">
                                    <div class="efficiency-bar">
                                        <div class="efficiency-fill" style="width: 91%"></div>
                                    </div>
                                    <span class="efficiency-text">91%</span>
                                </td>
                                <td class="time-cell">14:25:18</td>
                                <td class="controller-cell">海信</td>
                                <td class="signal-status">
                                    <div class="signal-light green"></div>
                                    <span>绿灯</span>
                                </td>
                                <td class="action-cell">
                                    <button class="action-btn view" title="查看详情">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="action-btn adjust" title="参数调节">
                                        <i class="fas fa-sliders-h"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td class="intersection-name">榆亚路-鹿岭路（鹿岭路口）</td>
                                <td><span class="status-badge status-offline">离线状态</span></td>
                                <td class="number-cell">--</td>
                                <td class="number-cell">--</td>
                                <td class="number-cell">--</td>
                                <td class="efficiency-cell">
                                    <div class="efficiency-bar">
                                        <div class="efficiency-fill offline" style="width: 0%"></div>
                                    </div>
                                    <span class="efficiency-text">--</span>
                                </td>
                                <td class="time-cell">13:45:22</td>
                                <td class="controller-cell">海康</td>
                                <td class="signal-status">
                                    <div class="signal-light offline"></div>
                                    <span>离线</span>
                                </td>
                                <td class="action-cell">
                                    <button class="action-btn view" title="查看详情">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="action-btn adjust" title="参数调节" disabled>
                                        <i class="fas fa-sliders-h"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 分页器 -->
                <div class="table-pagination">
                    <div class="pagination-info">
                        显示 1-6 条，共 78 条路口记录
                    </div>
                    <div class="pagination-controls">
                        <button class="pagination-btn disabled">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <button class="pagination-btn active">1</button>
                        <button class="pagination-btn">2</button>
                        <button class="pagination-btn">3</button>
                        <button class="pagination-btn">...</button>
                        <button class="pagination-btn">13</button>
                        <button class="pagination-btn">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </section>
        </div>
    </main>

</body>

</html>